<template>
  <div>
    <h1>
      添加线路
      <p>
        <el-tag size="large" @click="$router.push('/line')"> 取消</el-tag>
        &emsp;
        <el-tag @click="addSub" size="large"> 添加 </el-tag>
      </p>
    </h1>
    <el-row class="row">
      <el-col :span="8">
        状态
        <el-select
          v-model="form.state"
          class="m-2"
          placeholder="Select"
          size="default"
          @change="
            () => {
              getlist();
            }
          "
        >
          <el-option
            v-for="item in options1"
            :key="item"
            :label="item"
            :value="item"
          /> </el-select></el-col
      ><el-col :span="8">
        类型
        <el-select
          v-model="form.type"
          class="m-2"
          placeholder="Select"
          size="default"
          @change="
            () => {
              getlist();
            }
          "
        >
          <el-option
            v-for="item in options"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="8">
        车次 <el-input v-model="form.train" placeholder="请输入车次" />
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="8">
        城市
        <el-input v-model="form.city" placeholder="请输入城市" />
      </el-col>
    </el-row>
    <p class="city">
      <span v-for="v in value" :key="v"> {{ v }}></span>
    </p>
    <!-- 穿梭框 -->
    <el-transfer
      class="trans"
      :titles="['路线1', '路线2']"
      :button-texts="['城市1', '城市2']"
      v-model="value"
      :data="data"
    />
  </div>
</template>

<script>
import { HttpAddLine, HttpList } from "api";
import { ElMessage } from "element-plus";
export default {
  data() {
    const generateData = (_) => {
      const data = [];
      const cities = [
        "重庆",
        "内蒙古",
        "哈尔滨",
        "上海",
        "北京",
        "深圳",
        "南京",
        "西安",
        "成都",
      ];
      const pinyin = [
        "shanghai",
        "beijing",
        "guangzhou",
        "shenzhen",
        "nanjing",
        "xian",
        "chengdu",
      ];
      cities.forEach((city, index) => {
        data.push({
          label: city,
          key: city,
          pinyin: pinyin[index],
        });
      });
      return data;
    };
    return {
      data: generateData(),
      value: ["西安", "内蒙古"],
      title: this.$router.params,
      form: {
        city: "",
        type: "高速动车",
        train: "",
        name: "",
        seat: 1,
        state: "停用",
        con: 3,
        line: "",
        line1: "",
      },
      options: [
        "高速动车",
        "动车组",
        "城际高速",
        "直达特快",
        "空调特快",
        "快速",
        "普快",
      ],
      options1: ["停用", "启用"],
    };
  },
  methods: {
    async addSub() {
      console.log(this.value[0]);
      if (this.value[2]) {
        this.form.line = this.value[0] + "->" + this.value[1];
        this.form.line1 = this.value[2];
      } else if (this.value[3]) {
        this.form.line = this.value[0] + "->" + this.value[1];
        this.form.line1 = "->" + this.value[2] + "->" + this.value[3];
      } else if (this.value[4]) {
        this.form.line = this.value[0] + "->" + this.value[1];
        this.form.line1 =
          "->" + this.value[2] + "->" + this.value[3] + "->" + this.value[4];
      } else {
        this.form.line = this.value[0];
        this.form.line1 = this.value[1];
      }
      const res = await HttpAddLine({ ...this.form });
      if (res.data.code === 200) {
        ElMessage({
          message: res.data.msg,
          type: "success",
        });
      } else {
        ElMessage({
          message: res.data.msg,
          type: "warning",
        });
      }
    },
    async getlist() {
      const res = await HttpList({ pageCode: 1, pageCode: 20, val: "" });
      console.log(res.data);
    },
  },
  mounted() {
    this.getlist();
  },
};
</script>

<style lang='scss' scoped>
h1 {
  display: flex;
  width: 100%;
  line-height: 30px;
  border-bottom: solid 1px #ccc;
  padding-bottom: 20px;
  justify-content: space-between;
  margin-bottom: 30px;
  font-size: 30px;
}
p {
  .el-tag {
    font-size: 20px;
    padding: 17px 34px;
  }
}
.row {
  margin: 0px auto;
  font-size: 17px;
  line-height: 20px;
  display: flex;
  margin-bottom: 30px;
  a {
    float: left;
    margin-right: 3px;
  }
  .el-input,
  el-select {
    height: 28px;
    margin-left: 3px;
    width: 180px;
  }
}
.trans {
  margin: 0px auto;
  width: 70%;
}
.city {
  line-height: 30px;
  display: flex;
  margin-left: 30px;
  span {
    float: left;
  }
}
</style>